<script lang="tsx">
import { BasicDialog, useDialogInner } from '@/components/BasicDialog'
import { defineComponent, ref, unref, type PropType } from 'vue'
import type { QueryFunType } from '../types/queryType'
import { has } from 'lodash-es'
export default defineComponent({
  props: {
    queryFun: {
      type: Function as PropType<(opt: QueryFunType) => void>,
      required: true,
    },
  },
  emits: ['register'],
  setup(props, { attrs }) {
    const dataObj = ref<any>()
    // const formSchemaList: FormSchema[] = [
    //   {
    //     label: '查询内容',
    //     field: 'searchText',
    //     component: 'Input',
    //     required: true,
    //     colProps: { span: 24 }
    //   },
    //   {
    //     label: '查询范围',
    //     field: 'range',
    //     component: 'RadioGroup',
    //     colProps: { span: 24 },
    //     defaultValue: 'all',
    //     componentProps: {
    //       options: [
    //         {
    //           value: 'all',
    //           label: '全部节点'
    //         },
    //         {
    //           value: 'table',
    //           label: '只查询表格'
    //         },
    //         {
    //           value: 'folder',
    //           label: '只查询文件夹'
    //         }
    //       ]
    //     }
    //   },
    //   {
    //     label: '查询方向',
    //     field: 'direction',
    //     component: 'RadioGroup',
    //     colProps: { span: 24 },
    //     defaultValue: 'down',
    //     componentProps: {
    //       options: [
    //         {
    //           value: 'down',
    //           label: '向下查询'
    //         },
    //         {
    //           value: 'up',
    //           label: '向上查询'
    //         }
    //       ]
    //     }
    //   }
    // ];
    // const [registerForm, { resetFields, validate, updateSchema }] = useForm({
    //   schemas: formSchemaList,
    //   showActionButtonGroup: false,
    //   layout: 'vertical'
    // });
    const [registerModal] = useDialogInner(async (data: any) => {
      // resetFields();
      // console.log('data', data)
      dataObj.value = data
      if (has(data, 'showRange') && !data.showRange) {
        // updateSchema({
        //   field: 'range',
        //   ifShow: false
        // });
      }
    })

    async function handleSubmit() {
      // let files = (await validate()) as QueryFunType;
      // if (has(unref(dataObj), 'showRange') && !unref(dataObj).showRange) {
      //   files.range = 'all';
      // }
      // props.queryFun({ ...files, type: 'all' });
    }

    async function handleOne() {
      // let files = (await validate()) as QueryFunType;
      // if (has(unref(dataObj), 'showRange') && !unref(dataObj).showRange) {
      //   files.range = 'all';
      // }
      // props.queryFun({ ...files, type: 'one' });
    }
    function visibleChange(bool: boolean) {
      if (!bool) {
        props.queryFun({ type: 'cancel' })
      }
    }
    function RenderFooter() {
      return (
        <div class="flex items-center">
          <el-button type="primary" onClick={handleOne}>
            查询下一个
          </el-button>
          <el-button type="primary" onClick={handleSubmit}>
            查询全部
          </el-button>
        </div>
      )
    }
    return () => {
      let mask = true
      if (has(unref(dataObj), 'showMask') && !unref(dataObj).showMask) {
        mask = false
      }
      return (
        <BasicDialog
          {...attrs}
          onRegister={registerModal}
          onVisible-change={visibleChange}
          title="查询文件"
          v-slots={{
            footer: () => RenderFooter(),
          }}
        ></BasicDialog>
      )
    }
  },
})
</script>
<style lang="less" scoped></style>
